<template>
  <div class="page">
    <!-- 导航 开始 -->
    <nav-bar title="确认预约"></nav-bar>
    <!-- 导航 end -->

    <!-- 医院信息 开始 -->
    <div class="hospital" v-if="soure == 'hospital'">
      <li-image
        :src="hospital.logo"
        round
        class="img"
        v-if="hospital.logo"
      ></li-image>
      <img
        src="@/assets/images/avatar/hosp_default_circle.png"
        class="img"
        alt=""
        v-else
      />
      <span>{{ hospital.name }}</span>
    </div>
    <!-- 医院信息 end -->

    <!-- 医生信息 开始 -->
    <div class="hospital doctor" v-if="soure == 'doctor'">
      <li-image
        :src="doctor.photo"
        round
        class="img"
        v-if="doctor.photo"
      ></li-image>
      <img
        src="@/assets/images/avatar/doctor_circle.png"
        class="img"
        alt=""
        v-else
      />
      <div class="info">
        <div class="title">
          <span class="name">{{ doctor.name }}</span>
          <span class="poster">{{ doctor.personalTitle }}</span>
        </div>
        <div class="tips">从业年限{{ doctor.workYears }}年</div>
        <div class="tips">{{ doctor.hospitalName }}</div>
      </div>
    </div>
    <!-- 医生信息 end -->

    <!-- 商品信息 开始 -->
    <div class="hospital goods_box" v-if="soure == 'goods'">
      <div class="goods">
        <li-image
          :src="$getLogo(goods.goodsPics)"
          round
          class="img"
          v-if="$getLogo(goods.goodsPics)"
        ></li-image>
        <img
          src="@/assets/images/avatar/goods_default.png"
          class="img"
          alt=""
          v-else
        />
        <div class="info">
          <div class="title">
            <span class="name">{{ goods.goodsName }}</span>
            <div class="price">
              <span class="now">￥{{ goods.activityPrice }}</span>
              <span class="old">￥{{ goods.sellPrice }}</span>
            </div>
          </div>
          <div class="tips">
            <span>{{ hospitalName }}</span>
            <span>x1</span>
          </div>
        </div>
      </div>
      <div class="goods_footer">
        <span>线上支付：</span>
        <span>￥0</span>
        <span class="activity_price">到店支付：</span>
        <span class="num">￥{{ goods.activityPrice }}</span>
      </div>
    </div>
    <!-- 商品信息 end -->

    <!-- 预约信息 开始 -->
    <div class="book_box">
      <van-field
        v-model="form.name"
        label="您的姓名"
        class="van-cell--required van_cell"
        placeholder="请填写您的姓名"
      />
      <van-field
        v-model="form.phone"
        label="联系手机"
        class="van-cell--required van_cell"
        placeholder="请填写联系手机号"
      />
      <van-field
        v-model="form.leaveWord"
        rows="1"
        autosize
        label="预约留言"
        class="van_cell"
        type="textarea"
        placeholder="可备注您的口腔需求"
      />
      <!-- <div class="cell">
          <div class="name required">您的姓名</div>
          <div class="input_box">
            <input type="text" v-model="form.name" class="a_input" placeholder="请填写您的姓名" />
          </div>
        </div>
        <div class="cell">
          <div class="name required">联系手机</div>
          <div class="input_box">
            <input type="text" v-model="form.phone" class="a_input" placeholder="请填写联系手机号" />
          </div>
        </div>
        <div class="cell">
          <div class="name">预约留言</div>
          <div class="input_box">
            <input type="textarea" v-model="form.leaveWord" class="a_input" placeholder="可备注您的口腔需求" />
          </div>
        </div> -->
    </div>
    <!-- 预约信息 end -->

    <!-- 底部按钮 开始 -->
    <div class="footer">
      <div class="tips">
        <img src="@/assets/images/tips.png" class="img" alt="" />
        <span>提交成功后将有客服人员与您联系</span>
      </div>
      <div class="btn_group">
        <button class="btn" @click="saveInfo">提交</button>
      </div>
    </div>
    <!-- 底部按钮 end -->
  </div>
</template>
<script>
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_INFO,
  GET_DOCTOR_INFO,
  SAVE_APPOINTMENT_INFO,
  GET_GOODS_INFO,
} from "@/http/interface";
import { showToast, deepClone, checkPhone } from "@/utils/utils";
import { Field } from "vant";
export default {
  components: {
    [Field.name]: Field,
  },
  data() {
    return {
      id: "",
      source: this.$route.query.source,
      form: {},
      hospital: {},
      doctor: {},
      goods: {},
      hospitalName: "",
      hospitalId: "",
    };
  },
  head() {
    return {
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/hospital/book`,
        },
      ],
    };
  },
  async asyncData({ query, $axios }) {
    let hospitalName = "";
    let hospital = {};
    let doctor = {};
    let goods = {};
    let params = { id: query.id };

    // 医院
    if (query.source == "hospital") {
      let res = await $axios.get(GET_HOSPITAL_INFO, {
        params: params,
      });
      let oInfo = res.data || {};
      hospital = oInfo.hospital || {};
    }

    // 医生
    if (query.source == "doctor") {
      let res = await $axios.get(GET_DOCTOR_INFO, {
        params: params,
      });
      doctor = res.data || {};
    }

    // 商品
    if (query.source == "goods") {
      let res = await $axios.get(GET_GOODS_INFO, {
        params: params,
      });
      goods = res.data || {};
      let o = (goods.hospitalList || []).find((k) => k.id == query.hospitalId);
      hospitalName = o ? o.name : "";
    }

    return {
      id: query.id,
      hospital,
      doctor,
      goods,
      hospitalName,
      hospitalId: query.hospitalId,
    };
  },
  methods: {
    // 提交数据
    async saveInfo() {
      let query = this.$route.query;
      let typesList = {
        hospital: "hospitalId",
        doctor: "doctorId",
        goods: "goodsId",
      };
      let idName = typesList[query.source];
      let o = deepClone(this.form);
      if (!o.name) {
        showToast({
          message: "请填写您的姓名",
        });
        return false;
      }
      if (!o.phone) {
        showToast({
          message: "请填写联系手机",
        });
        return false;
      }
      if (!checkPhone(o.phone)) {
        showToast({
          message: "联系手机格式不正确",
        });
        return false;
      }
      o[idName] = query.id;
      o.platform = PLATFORM_TYPE;
      // if (query.source == 'goods') {
      //   o.hospitalId = query.hospitalId
      // }
      if (query.hospitalId) {
        o.hospitalId = query.hospitalId;
      }
      console.log(o);
      let res = await this.$axios.post(SAVE_APPOINTMENT_INFO, o);
      if (res.code == 200) {
        this.$router.push({
          path: "/hospital/success",
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/hospital/book.less";
</style>